class QueryFeedback extends React.Component {
    constructor(props) {
        super(props);
        this.isAdmin = parent.hasRoles('admin');
        this.state = {
            feedbackInfo: ''
        }
    }

    componentDidMount() {
        layui.use(['form', 'laypage'], function () {
            this.layer = layui.layer;
            // noinspection ES6ModulesDependencies
            this.form = layui.form();
            this.queryVisitor();
            this.form.on('select(selectState)', function (data) {
                this.queryVisitor();
            }.bind(this));

        }.bind(this));
    }

    queryVisitor() {
        let params = {};
        params.page = 1;
        params.pageSize = 10;
        params.state = this.refs.selectState.value === '-1' ? '' : this.refs.selectState.value;
        this.updateList(params);
    }

    updateList(params) {
        postJson('/feedback/query.x', $.param(params), function (data) {
            this.arrayList = data.list;
            this.setState({
                tBody: ''
            });
            if (params.page === 1) {
                layui.laypage({
                    cont: 'page'
                    , pages: Math.ceil(data.size / params.pageSize)
                    , jump: function (row, first) {
                        if (!first) {
                            params.page = row.curr;
                            this.updateList(params);
                        }
                    }.bind(this)
                });
            }
        }.bind(this))
    }

    seeInfo(feedbackInfo) {
        this.setState({
            feedbackInfo: feedbackInfo
        }, () => {
            layer.open({
                type: 1,
                shade: false,
                area: ['60%', 'auto'],
                title: '反馈详情',
                maxHeight: '80%',
                shadeClose: true,
                maxmin: true,
                content: $('#info_modal') //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            });
        });

    }

    showImage(url) {
        if (url) {
            layer.photos({
                photos: {
                    "title": "图片",
                    "data": [
                        {
                            "src": url
                        }
                    ]
                }, anim: 5
            });
        } else {
            layer.msg("此记录无照片!");
        }
    }

    submitTreatmentModal(feedbackId) {
        this.feedbackId = feedbackId;
        layer.open({
            type: 1,
            shade: false,
            area: ['50%', 'auto'],
            title: false,
            maxHeight: '50%',
            shadeClose: true,
            content: $('#treatment_result_modal') //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
    }

    submitTreatmentResult() {
        let params = {};
        params.id = this.feedbackId;
        params.treatmentResult = this.refs.result_content.value;
        postJson('/feedback/saveTreatmentResult.x', $.param(params), function (data) {
            this.refs.result_content.value = '';
            this.queryVisitor();
            layer.closeAll();
            this.layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加成功', {icon: 6});
        }.bind(this))
    }

    tBody() {
        if (this.arrayList) {
            return this.arrayList.map(function (array) {
                return (<tr>
                    <td>{array.title}</td>
                    <td>{array.commit_time}</td>
                    <td>
                        {
                            array.state === 'FEEDBACK_STATE_IS_HANDLED' ?
                                <div style={{color: 'blue'}}>已处理</div> : <div style={{color: 'red'}}>未处理</div>
                        }
                    </td>
                    <td>{array.content}</td>
                    <td>
                        <button type="button" className="layui-btn layui-btn-small"
                                onClick={() => this.seeInfo(array)}>查看详情
                        </button>
                        {
                            this.isAdmin ?
                                <button type="button" className="layui-btn layui-btn-small layui-btn-normal"
                                        onClick={() => this.submitTreatmentModal(array.id)}>
                                    提交处理结果</button> : ''
                        }
                    </td>
                </tr>);
            }.bind(this));
        }
    }

    render() {
        return <Frame header="反馈列表">
                <form className="layui-form layui-form-pane">

                    <div className="layui-form-item">
                        <label className="layui-form-label">状态</label>
                        <div className="layui-input-inline">
                            <select ref="selectState" name="selectState" id="selectState" data-filter="selectState">
                                <option value="-1">默认</option>

                                {
                                    this.isAdmin ?
                                        <option value="FEEDBACK_STATE_NOT_HANDLED" selected="selected">未处理</option>
                                        :
                                        <option value="FEEDBACK_STATE_NOT_HANDLED">未处理</option>
                                }
                                <option value="FEEDBACK_STATE_IS_HANDLED">已处理</option>
                            </select>
                        </div>
                    </div>

                    <div className="layui-form-item">
                        <div className="table-responsive">
                            <table className="tabel layui-table">
                                <colgroup>
                                    <col width="200px"/>
                                    <col width="200px"/>
                                    <col width="100px"/>
                                    <col/>
                                    <col width={this.isAdmin ? '205px' : '100px'}/>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>标题</th>
                                    <th>日期</th>
                                    <th>状态</th>
                                    <th>内容</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody name="tBody" id="tBody">{this.tBody()}</tbody>
                            </table>
                        </div>
                        <div id="page">
                        </div>
                    </div>

                    <div id="info_modal" style={{display: 'none', padding: '10px'}}>
                        <table className="layui-table" data-skin="line">
                            <colgroup>
                                <col width="100px"/>
                                <col/>
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>反馈账号</td>
                                <td>{this.state.feedbackInfo.user}</td>
                            </tr>
                            <tr>
                                <td>反馈手机</td>
                                <td>{this.state.feedbackInfo.phone}</td>
                            </tr>
                            <tr>
                                <td>反馈标题</td>
                                <td>{this.state.feedbackInfo.title}</td>
                            </tr>
                            <tr>
                                <td>反馈时间</td>
                                <td>{this.state.feedbackInfo.commit_time}</td>
                            </tr>
                            <tr>
                                <td>反馈内容</td>
                                <td>{this.state.feedbackInfo.content}</td>
                            </tr>
                            <tr>
                                <td>处理状态</td>
                                <td>{this.state.feedbackInfo.state === 'FEEDBACK_STATE_IS_HANDLED' ?
                                    <div style={{color: 'blue'}}>已处理</div> : <div style={{color: 'red'}}>未处理</div>}</td>
                            </tr>

                            {this.state.feedbackInfo.state === 'FEEDBACK_STATE_IS_HANDLED' ?
                                <tr>
                                    <td>处理结果</td>
                                    <td>{this.state.feedbackInfo.treatment_result}</td>
                                </tr> : ''}

                            {this.state.feedbackInfo.urls ? this.state.feedbackInfo.urls.length > 0 ?
                                <tr>
                                    <td>反馈图片</td>
                                    <td>{
                                        this.state.feedbackInfo.urls.map(function (url) {
                                            return <div className="Center-Container" style={divImgStyle}>
                                                <img className="Absolute-Center" style={imgStyle} src={url}
                                                     onClick={() => this.showImage(url)}/>
                                            </div>
                                        }.bind(this))
                                    }
                                    </td>
                                </tr> : '' : ''}
                            </tbody>
                        </table>
                    </div>

                    <div id="treatment_result_modal"
                         style={{display: 'none', paddingLeft: '10px', paddingRight: '10px', paddingTop: '20px'}}
                         className="layui-form-item layui-form-text">
                        <label className="layui-form-label">处理结果</label>
                        <div className="layui-input-block">
                            <textarea ref="result_content" id="result_content" name="result_content"
                                      placeholder="请输入处理结果"
                                      className="layui-textarea" data-verify="textarea"/>
                        </div>

                        <button style={{float: 'right', marginTop: '10px'}} type="button"
                                className="layui-btn layui-btn-small" onClick={() => this.submitTreatmentResult()}>确定提交
                        </button>
                    </div>

                </form>
        </Frame>
    }
}

let divImgStyle = {
    border: '1px solid #CDCDC1',
    float: 'left',
    marginLeft: '10px',
    width: '150px',
    height: '150px'
};

let imgStyle = {
    'max-height': '90%',
    'max-width': '90%'
};

ReactDOM.render(
    <QueryFeedback/>
    ,
    document.getElementById('example')
);